<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Verification</title>
    <script src="plugins/vue/dist/vue.min.js"></script>
    <!--导入vue和axios-->
    <script src="plugins/axios/dist/axios.js"></script>
    <script src="js/common.js"></script>
    <script src="js/element/element.js"></script>
    <script src="js/jsencrypt.js"></script>
    <link rel="stylesheet" href="js/element/element.css">
    <script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #71b7e6, #9b59b6);
        }

        li {
            margin-bottom: 10px;
            list-style: none;
        }

        .container {
            background: #fff;
            padding: 40px 60px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .container h1 {
            margin-bottom: 20px;
            color: #333;
        }

        .container input[type="email"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .container button {
            width: 100%;
            padding: 10px;
            background-color: #3498db;
            border: none;
            border-radius: 5px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .container button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <el-select v-model="user.language" :placeholder="messages.language" @change="changeLanguage">
        <el-option label="Chinese" value="zh"></el-option>
        <el-option label="English" value="en"></el-option>
    </el-select>
    <h1>{{ messages.title }}</h1>
    <el-form :model="user" status-icon label-width="100px">
        <el-form-item :label="messages.codeLabel" prop="code">
            <el-input type="text" v-model="user.code" :placeholder="messages.codePlaceholder"></el-input>
        </el-form-item>
        <el-form-item :label="messages.actionLabel" prop="action">
            <el-select v-model="user.action" :placeholder="messages.select_action">
                <el-option label="messages.delete_account" value="delete"></el-option>
                <el-option label="messages.suspend_account" value="pause"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <button @click="sendVerificationCode">{{ messages.submit }}</button>
    <br>
    <br>
    <li>{{ messages.processing }}:
        <ul>
            <li>{{ messages.processingInfo1 }}</li>
            <li>{{ messages.processingInfo2 }}</li>
        </ul>
    </li>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            user: {
                email: null,
                language: "en", // 设置默认语言为英文
                userType: null,
                code: null,
                token: null,
                action: null,
            },
            messages: {},
            translations: {
                zh: {
                    title: '输入验证码',
                    codeLabel: '验证码：',
                    codePlaceholder: '请输入您的验证码',
                    submit: '提交申请',
                    processing: '处理您的请求',
                    processingInfo1: '我们会在收到您的请求后的 7 天内处理。',
                    processingInfo2: '如果我们能够找到与您相关的信息，我们将删除它。',
                    error5: '提交失败~请稍后再试~',
                    error6: '网络异常！请稍后再试~',
                    success: '提交成功！请等待我们处理~',
                    language: '请选择语言',
                    actionLabel: '操作：',
                    select_action: '请选择操作',
                    delete_account: '删除账号',
                    suspend_account: '暂停账号',
                    error4: '请选择操作类型',
                },
                en: {
                    title: 'Enter Verification Code',
                    codeLabel: 'Code:',
                    codePlaceholder: 'Please enter your verification code',
                    submit: 'Submit Request',
                    processing: 'Processing Your Request',
                    processingInfo1: 'We will process your request within 7 days of receipt.',
                    processingInfo2: 'If we can find information related to you, we will delete it.',
                    error5: 'Submission failed~Please try again later~',
                    error6: 'Network abnormality! Please try again later~',
                    success: 'Submitted successfully! Please wait for us to process~',
                    language: 'Please select language',
                    actionLabel: 'Operation:',
                    delete_account: 'Delete account',
                    suspend_account: 'Suspend account',
                    select_action: 'Please select an action',
                    error4: 'Please select the operation type',
                }
            }
        },
        methods: {
            changeLanguage(value) {
                this.user.language = value;
                this.messages = this.translations[value];
            },
            sendVerificationCode() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if (this.user.code == null) {
                    this.$message.error(this.messages.codePlaceholder);
                    setTimeout(() => {
                        loading.close();
                    }, 1000);
                    return;
                }
                if (this.user.action == null) {
                    this.$message.error(this.messages.error4)
                    setTimeout(() => {
                        loading.close();
                    }, 1000);
                    return
                }
                let s = RsA_encryption(this.user);
                this.$http.post("/verify_code", s).then(res => {
                    let {code, message, result} = res.data;
                    if (code == "200") {
                        this.$message.success(this.messages.success);
                    } else {
                        this.$message.error(this.messages.error5)
                    }
                    setTimeout(() => {
                        loading.close();
                    }, 2000);
                }).catch(res => {
                    this.$message.error(this.messages.error6)
                    setTimeout(() => {
                        loading.close();
                    }, 2000);
                })
            },
        },
        mounted() {
            this.changeLanguage(this.user.language); // 页面加载时调用，设置默认语言文本
            let url = parseParamObj(window.location.search);
            if (url) {
                this.user.token = url.token
            }
        }
    })
</script>
</body>
</html>
